
import React from 'react'
import ReactDOM from 'react-dom'

import * as UnitAction  from '../../actions/UnitAction';
import { connect }  from 'react-redux';
import AssetGridCell from '../AssetGridCell'

class NewsPushEdit extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      data: {}
    }
  }

  componentWillReceiveProps(props) {
    // console.log(props.data)
    this.setState({
      data: props.data
    })
  }

  componentDidMount() {

  }

  componentDidUpdate () {

  }


  onChange(event, key) {
    var value = $(event.target).val();
    var data = this.state.data;
    data[key] = value;
    this.setState({
      data: data
    })

  }

  onBillboardTypeClick(type) {
    var data = this.state.data;
    data.type = type;
    this.setState({
      data: data
    })
  }

  onDataSubmit() {
    var data = this.state.data;
    if (!data.title || data.title.length == 0 || !data.description||data.description.length == 0
      || !data.content || !data.content.news_item || !data.type || data.type.length == 0) {
      alert("请填写完整信息!")
      return;
    }
    if (data.id) {
      this.props.onBillboardUpdateSubmit(this.state.data)
    }else {
      this.props.onNewBillboardSubmit(this.state.data)
    }

  }

  pad(n) {
    return n < 10 ? "0"+n : n;
  }


  render() {
    var self = this;
    return (
      <div className="modal fade" id="BillBoardSettingEdit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div className="modal-dialog" role="document">
          <div className="modal-content">
            <div className="modal-header">
              <button type="button" className="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
              <h4 className="modal-title" id="Delivery-modal-label">公告与活动</h4>
            </div>
            <div className="modal-body">

              <div className="row">
                <div className=" col-sm-4 create-button">
                  <button type="button" className="btn-select"
                          onClick={(event)=>this.props.onSelectAsset()}>选择素材</button>
                </div>
              </div>
              <div className="form-group">
                <label for="Delivery-name">标题</label>
                <input ref="DeliveryName" type="text" className="form-control"
                        id="Delivery-name" placeholder="标题" value={this.state.data.title}
                        onChange={(event)=>this.onChange(event, "title")} />
              </div>
              <div className="form-group">
                <label for="Delivery-name">摘要</label>
                <textarea ref="DeliveryName" type="text" className="form-control"
                        id="Delivery-name" placeholder="摘要" value={this.state.data.description}
                        onChange={(event)=>this.onChange(event, "description")} >
                </textarea>
              </div>
              <div className="btn-group">
                <div>
                  <label for="Delivery-name">类型</label>
                </div>
                <button type="button" className="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  <span refs="BillboardType">{this.state.data.type?this.state.data.type:"请选择类型"}</span>
                  <span className="caret"></span>
                </button>
                <ul className="dropdown-menu">
                  <li><a href="#" onClick={(event)=>this.onBillboardTypeClick("小区公告")}>小区公告</a></li>
                  <li><a href="#" onClick={(event)=>this.onBillboardTypeClick("小区活动")}>小区活动</a></li>
                  <li><a href="#" onClick={(event)=>this.onBillboardTypeClick("办事指南")}>办事指南</a></li>
                  <li><a href="#" onClick={(event)=>this.onBillboardTypeClick("周边生活")}>周边生活</a></li>
                  <li><a href="#" onClick={(event)=>this.onBillboardTypeClick("享生活")}>享生活</a></li>
                </ul>
              </div>

              <div className="row showList">
                <div className="col-sm-12">
                  <AssetGridCell
                    data = {{content: this.state.data.content}}/>
                </div>

              </div>

            </div>
            <div className="modal-footer">

              <button type="button" className="btn btn-default" data-dismiss="modal">取消</button>
              <button type="button" className="btn btn-primary"
                      onClick={(event)=> this.onDataSubmit()}>提交</button>
            </div>
          </div>
        </div>
      </div>
    )
  }
}


export default NewsPushEdit
